<template>
  <div>
    <el-button @click="changeLanguage">切换语言</el-button>
    <languageChild></languageChild>
  </div>
</template>

<script setup lang="ts">
import { provide, ref, defineAsyncComponent } from "vue";
const languageChild = defineAsyncComponent(() => import("./languageChild.vue"));
const language = ref("en");
const changeLanguage = () => {
  language.value = language.value === "en" ? "fr" : "en";
};

const translations = {
      en: {
        greeting: "Hello",
      },
      fr: {
        greeting:'Bonjour'
      },
    },
provide("language",language);
provide("translation", translations);

return {
  language,
  changeLanguage
}

</script>